<template>
	<view>
		<view class="header" :class="isborder ? 'borderBottom' : ''" style="z-index: 99;"
		:style="{height:(height + sysinfo.statusBarHeight)+'px',backgroundColor:bgColor}">
			<view :style="{height:sysinfo.statusBarHeight +'px'}"></view>
			<view class="box cc-rows cc-flex-center":style="'height:'+ height">
				<view class="headleft cc-rows cc-flex-vcenter" :style="{height:height+'px'}" v-if="isleft">
					<slot name="headLeft">
						<text class="icon iconfont cc-size-40" @click="goback" :style="'color:'+color">&#xe68f;</text>
					</slot>
				</view>
				<text class="cc-size-32" :style="'line-height:'+height+'px;color:'+color" v-if="isTitle">{{title}}</text>
				<view class="headright cc-rows cc-flex-vcenter" :style="{height:height+'px'}" v-if="isright">
					<slot name="headRight"></slot>
				</view>
			</view>
		</view>
		<view :style="'height:'+ (height + sysinfo.statusBarHeight) +'px'"></view>
	</view>
</template>

<script>
	export default {
		name:"cc-custom-header",
		props:{
			height:{type:Number, default:44},
			isleft:{type:Boolean, default:true},
			isright:{type:Boolean, default:true},
			isTitle:{type:Boolean, default:true},
			title:{type:String, default:""},
			color:{type:String, default:"#ffffff"},
			bgColor:{type:String, default:"#00ca97"},
			isborder:{type:Boolean,default:false}
		},
		data() {
			return {
				sysinfo:uni.getSystemInfoSync()
			};
		},
		created() {
			// console.log(this.bgColor)
		},
		methods:{
			goback(){
				uni.navigateBack()
			}
		}
	}
</script>
<style>
.header{position:fixed; width: 750rpx;top: 0;left: 0;}
.headleft{position: absolute;left: 25rpx; top: 0;}
.headright{position: absolute;right: 25rpx; top: 0;}

.header .box{position:relative; width: 750rpx;}
.goback{position: absolute; left:25rpx; top:0; width:40rpx;}
.borderBottom{border-bottom: 1px solid #EEEEEE;}
</style>
